<template>
	<view class="details">
           <view class="current">{{current}}/{{num}}</view>
			<swiper class="swiper" @change="change" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" >
			<swiper-item v-for="(item,index) in list.image" >
				<view class="swiper-item" ><image :src="item.img" mode="heightFix"></image> </view>
			</swiper-item>
		</swiper>
        
		<view class="detail">
			<view class="num">
				月售：728份
			</view>
			<view class="name">
				{{list.name}}
			</view>
			<view class="value">
				{{list.value}}
			</view>
			
			<view class="bun">	 
				<view><image src="../../static/home/积分 (1).png" mode=""></image><text>{{list.num}}环保值</text></view>
	             <view class="nums">
	             	8.99
	             </view>
			</view>
		</view>
		  
		  <view class="introduce">
			  <image src="../../static/shop/组 1 (3).png" mode="heightFix">商品介绍</image>
		  	
		  </view>
		 
		<view class="image">
			<image src="../../static/shop/图层 2.png" mode="widthFix"></image>
		</view>
		 
		<view class="bount">
			<view class="bount-l">
				<image src="../../static/shop/详情页客服 .png" mode="widthFix"></image>
				 <view class="text">客服</view>
				
			</view>
			<view class="bount-l">
				<image src="../../static/shop/分享.png" mode="widthFix"></image>
				 <view class="text">分享</view>
				 
			</view>
			<view class="but">
				立即兑换
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			list:[],
			current:1
			};
		},
		computed:{
			num(){
				return this.list.image.length
			}
		},
		onLoad(e) {
			// console.log(e);
			// if(JSON.stringify(e) === "{}") return
			this.list=JSON.parse(e.data)
			console.log(this.list);
		},
		methods:{
			change(e){
				this.current=e.detail.current+1
			}
		}
	}
</script>

<style lang="less" scoped>
	.but{
		width: 200rpx;
		height: 70rpx;
		color: #fff;
		background-color: #00c783;
		border-radius: 10rpx;
		margin-left: 200rpx;
		text-align: center;
		line-height: 70rpx;
	}
 .bount{
	 position: fixed;
	 display: flex;
	 align-items: center;
	 bottom: 0;
	 left: 0;
	 width: 100vw;
	 height: 100rpx;
	 background-color: #fff;
	 .bount-l{
		
		 // height: 100rpx;
		 width: 68rpx;
		 margin-left: 100rpx;
		 
			 image{
				 display: block;
				 margin: auto;
				 width: 40rpx;
			 
		 }
		 .text{
			 font-size: 26rpx;
			 text-align: center;
			 margin-top: 5rpx;
		 }
	 }
 }
	.introduce{
		position: relative;
		width: 100vw;
		height: 82rpx;
		text-align: center;
		line-height: 82rpx;
		font-size: 30rpx;
		font-weight: bold;
		image{
			position: absolute;
			top: 0;
			left:0;
			right: 0;
			bottom: 0;
			display: block;
			margin: auto;
			height: 17rpx;
			
		}
		text{
			
		}
	}
	.image{
		width: 100vw;
		// margin-bottom: 100rpx;
		height: auto;
		// background-color: #00c783;
	 image{
		 display: block;
		 width: 100vw;
	 }
	}
	.detail{
	   position: relative;
	   margin-top: 20rpx;
		height:  170rpx;
		width: 100vw;
		background-color: #fff;
		padding-top: 20rpx;
	}
	.name{
	width: 100vh;
	height: 34rpx;
	line-height: 34rpx;
	
	margin-left: 20rpx;
	font-size: 32rpx;
	font-weight: bold;
	}
	.value{
		width: 100vh;
		height: 30rpx;
		line-height: 30rpx;
		color: #cacaca;
		font-size: 28rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}
	.num{
		position:absolute;
		// width: 120rpx;
		// height:42rpx;
		padding: 8rpx 20rpx; 
		right: 0;
		top: 30rpx;
		font-size: 22rpx;
		white-space: nowrap;
		background-color: #eeeeee;
		opacity: 0.7;
		// text-align: center;
		// line-height: 42rpx;
		color: #bebebe;
		border-radius: 20rpx 0rpx 0 20rpx;
		// z-index: 999;
	}
	.bun{
		margin-left: 20rpx;
		display: flex;
		// justify-content: space-between;
		align-items: center;
		height: 46rpx;
		// width: 100%;
		margin-top: 25rpx;
		
		view{
		display: flex;
		justify-content: center;
		align-items: center;
		
		image{
		width: 22rpx;
		height: 26rpx;
		padding-right: 10rpx;
		}
		text{
			font-size: 30rpx;
			color: #00c783;
		}
		}
		}
		.nums{
			margin-left: 20rpx;
			color: #b5b5b5;
			font-size: 26rpx;
			text-decoration: line-through
		}
	.details{
		position: relative;
		width: 100vw;
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 100rpx;
	}
	.swiper{
		height:430rpx ;
		// position: relative;
	}
.swiper-item{
	
	height: 100%;
	width: 100%;
image{
	display: block;
	margin: auto;
	max-height: 430rpx;
}   
}
.current{
	position: absolute;
	right: 20rpx;
	top: 400rpx;
	height: 36rpx;
	width: 80rpx;
	text-align: center;
	line-height: 36rpx;
	background-color: rgba(171, 171, 171,0.6);
	color: #ffffff;
	z-index: 999;
	font-size: 28rpx;
	border-radius: 30rpx;
}


</style>
